<template>
  <view class="record">
    <view class="record-bg" :style="{ backgroundImage: `url(${baseUrl}/images/bg-6.png)` }"></view>
    <view class="record-content">
      <view class="card">
        <view class="card-tab">
          <view class="card-tab-item" :class="{ active: type == 1 }" @click="type = 1; getList()">
            <text>未出行</text>
          </view>
          <view class="card-tab-item" :class="{ active: type == 2 }" @click="type = 2; getList()">
            <text>已完成</text>
          </view>
        </view>
        <view class="card-list">
          <view class="card-list-item" v-for="item in list" :key="item.id" @click="goToDetail(item.id)">
            <image class="card-list-item-icon" src="/reservation-images/icon-list.png" mode="widthFix" />
            <view class="card-list-item-right">
              <view class="record-name">{{ item.title }}</view>
              <view class="record-time">
                <image style="width: 30rpx; height: 30rpx;margin-right: 12rpx;"
                  src="/reservation-images/calendar-gray.png" mode="widthFix" />
                <text style="font-size: 26rpx;">{{ item.date }}</text>
              </view>
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { baseUrl } from '@/reservation/config'
import { ref, onMounted } from 'vue'
import { reservationList } from '@/api/reservation'
defineOptions({
  name: 'record',
})

const list = ref([])
const type = ref(1) // 1: 未出行 2: 已完成
onMounted(() => {
  getList()
})

const getList = () => {
  reservationList({
    openid: uni.getStorageSync('reservation_openid'),
    type: type.value,
  }).then((res) => {
    list.value = res.data
  })
}

const goToDetail = (id) => {
  uni.navigateTo({
    url: '/reservation/record/detail?id=' + id,
  })
}

</script>

<style lang="less" scoped>
@import './index.less';
</style>
